Isotope.js -suodatin WordPressin kategoriasivulle

Isotope.js on jQueryyn perustava Javascript-kirjasto, jolla voi tehdä taianomaisesti toimivia suodatus- ja lajittelutoiminnallisuuksia nettisivuille.

Esimerkkejä löydät esimerkiksi Parhaat lehdet -sivuston etusivulta, jossa voit rajata näkymän tietyntyyppisiin lehtiin nappeja painamalla, tai Lautapelioppaan avainsanasivuilta, jossa pudotusvalikolla voi rajata pelivalikoimaa.

Isotope tekee tällaisten suodatustoimintojen tekemisestä todella helppoa, etenkin kun WordPress tulee vähän puolimatkassa vastaan. Parhaat lehdet -suodatin on tehty Isotope for WordPress -pluginilla, jolla tuollainen perussuodatin valmistuu hyvin nopeasti, etenkin jos suodatus perustuu kategorioihin.

Lautapelioppaan puolella tarkoitus oli saada pari lisäjujua matkaan, joten tein suodatuksen alusta pitäen itse. Monimutkaista sekään ei ollut.

Isotope-suodatuksen rakentaminen

Lataa ensin Isotope-tiedosto Isotopen kotisivuilta ja siirrä se palvelimelle, vaikkapa WordPressin juurihakemistoon laitettavaan hakemistoon nimeltä js.

Tee samaan hakemistoon myös toinen tiedosto, vaikkapa sivustonnimi-isotope.js. Tähän tiedostoon tulee myöhemmin koodi, jolla Isotope aktivoidaan.

Lisää skriptit WordPressiin. Primitiivinen tapa on lisätä suora linkitys skripteihin teemasi header-templateen, mutta se on väärin – WordPress tarjoaa hienostuneempiakin tapoja. Lisää ennemmin tämä koodi teemasi function.php:hen:

function lautapeliopas_js() {
	if ( is_archive() ) {
		wp_enqueue_script( 'isotope', '/js/isotope.pkgd.min.js', array('jquery') );
		wp_enqueue_script( 'lp-isotope', '/js/lautapeliopas-isotope.js', array('isotope') );
	}
}
add_action( 'wp_enqueue_scripts', 'lautapeliopas_js' );

Koska itse käytän Isotopea vain arkistosivuilla, koodissa on tuo is_archive()-tarkastus, joka lisää skriptit ainoastaan arkistosivuille. Muilla sivuilla ei tarvitse turhaan latailla turhia tiedostoja. Huomaa, että Isotopen riippuvuuslistaan on merkitty jquery, jotta WordPress lataa Isotopen vasta jQueryn jälkeen ja oman skriptin vaatimuksissa taas on isotope, jotta se tulee Isotopen perään.

Muutokset kategoriasivulle

Lautapelioppaan kategoriasivuilla ei ollut lähtökohtaisesti mitään rajaavaa elementtiä artikkelilistan ympärillä, joten sellainen piti lisätä, jotta Isotope tietää, mitä listaa sen pitää käsitellä. Siispä laitoin artikkelilistan ympärille <div id=”pelilista”>…</div> -tagit.

Avainsanojen mukainen suodatus ei vaadi mitään toimenpiteitä, koska teemani (joka perustuu Twenty Fourteeniin) lisää tällaisissa listauksissa merkintöjen <article>-tagiin automaattisesti avainsanojen ja kategorioiden mukaiset CSS-luokat:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Avain tässä on tuo post_class(). Sen ansiosta kaikissa ”noppapelit”-avainsanalla merkityissä peleissä on nyt valmiiksi luokka tag-noppapelit, jota voi käyttää suodatuksessa.

Koska avainsanoja on pitkä lista, katsoin pudotusvalikon kätevimmäksi tavaksi esittää suodatus käyttäjälle. Niinpä sopivaan kohtaan sivua lisätään tällainen <select>-elementti:

<select id="filters">
<option value="*">Näytä kaikki</option>
<option value=".tag-noppapelit">Noppapelit</option>
<option value=".tag-korttipelit">Korttipelit</option>
</select>

Sijoituspaikasta sen verran, että tämän pitää olla tuon #pelilista-divin ulkopuolella – ihmettelin itse hetken, mihin valikko katosi, heti kun jotain valitsi. Tajusin sitten siirtää valikon #pelilistan ulkopuolelle…

No, tämä näyttää hyvältä, mutta aika työlästä on kirjoitella kaikki eri arvot käsin listaan. Lisäksi olisi kätevää, että listassa olisi vain ne avainsanat, joita kyseisessä listassa oikesti käytetään, ettei käyttäjälle tule tyhjää listaa näkyviin.

$tag_list = array();
while ( have_posts() ) {
    the_post();
    $tags = get_the_tags();
 
    foreach ( $tags as $tag ) {
        $tag_list[$tag->slug] = $tag->name;
    }
}
rewind_posts();

Tämä koodinpätkä lisätään arkistosivulle ennen #pelilista-diviä. Se käy läpi kaikki sivulla näytettävät merkinnät ja kerää niistä tagit talteen. Tagit menevät $tag_list-taulukkoon, josta niiden slugit ja nimet saadaan myöhemmin napattua.

<select id="filters">
<option value="*">Näytä kaikki</option>
<?php ksort( $tag_list );
foreach ( $tag_list as $slug => $name ) {
    echo <<<EOH
<option value=".tag-$slug">$name</option>
EOH;
}
?>
</select>

Tässä sitten se varsinainen <select>-elementti.

Nyt meillä on artikkelilistauksessa tarvittavat koodit ja <select>, jolla rajauksen voi valita. Ei puutu kuin Javascript-joka aktivoi Isotopen tekemään sen rajauksen. Tämä koodi tulee siihen sivustonnimi-isotope.js-tiedostoon, joka alussa luotiin:

jQuery( document ).ready(function($) {
// init Isotope
var $container = $('#pelilista').isotope({
    itemSelector : "article",
});
 
// filter items on select change click
$('#filters').on( 'change', function() {
    var filterValue = this.value;
    $container.isotope({ filter: filterValue });
});
 
});

Muuta ei sitten tarvitakaan. Tämän jälkeen rajaukset toimivat näppärästi. Jos haluat pudotusvalikon sijasta napeilla toimivan rajauksen, ohjeet löytyvät Isotopen varsin oivallisesta dokumentaatiosta.